<template>
  <view class="pay-page">
    <view class="amount">
      <view class="line">
        <text class="text">用户ID: </text>
        <text class="num">{{user_id}}</text>
      </view>
      <view class="line">
        <text class="text">订单号: </text>
        <text class="num">{{sn}}</text>
      </view>
      <view class="line">
        <text class="text">支付金额: </text>
        <text class="num">￥{{amount}}</text>
      </view>
    </view>
    <view class="button">
      <!--<u-button type="primary" text="确认支付" v-if="third_pay" @click="payThird"></u-button>-->
      <!--<u-button type="primary" text="确认支付" v-else @click="pay"></u-button>-->
      <u-button type="primary" text="正在支付中..."></u-button>
    </view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import Pay from '../../api/pay'
const payModel = new Pay()

export default {
  data() {
    return {
      sn: '',
      amount: 0,
      user_id: 0,
      third_pay: false,
    }
  },
  methods: {

    // 微信
    pay() {
      payModel.payPrepareWxMini({
        sn: this.sn,
        amount: this.amount,
        body: '购买商品',
        pay_type: 1,
        pay_type_text: '订单',
        user_id: this.user_id,
      }).then(data => {
        console.log(data)

        uni.requestPayment({
          provider: 'wxpay',
          // 神奇的小程序支付, 这里的类型必须 是string
          timeStamp: data.timestamp + '',
          nonceStr: data.nonceStr,
          package: data.package,
          paySign: data.sign,
          signType: 'MD5',
          success: () => {
            uni.showToast({
              icon: 'none',
              title: '支付成功',
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            }, 500)
          },
          fail: () => {
            uni.showToast({
              icon: 'error',
              title: '支付失败',
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            }, 500)
          }
        })
      })
    },

    // 汇聚
    payThird() {
      payModel.payPrepareMini({
        sn: this.sn,
        amount: this.amount,
        body: '购买商品',
        pay_type: 1,
        pay_type_text: '订单',
        user_id: this.user_id,
      }).then(data => {
        console.log(data)

        let { result } = data
        result = result.rc_Result

        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: result.timeStamp,
          nonceStr: result.nonceStr,
          package: result.package,
          paySign: result.paySign,
          signType: result.signType,
          success: () => {
            uni.showToast({
              icon: 'none',
              title: '支付成功',
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            }, 500)
          },
          fail: () => {
            uni.showToast({
              icon: 'error',
              title: '支付失败',
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/center/index'
              })
            }, 500)
          }
        })
      })
    },

  },
  onLoad(options) {

    // console.log('mini', options)

    let serial = options.serial
    serial = JSON.parse(serial)

    // app支付
    if (options.is_order) {
      uni.setStorageSync('o', options.serial)
    }

    payModel.getPayAmount({ order_id: serial.order_id }).then(response => {
      let { data } = response
      data = base64.parse(data)
      // console.log(data)

      this.sn = data.sn
      this.amount = data.amount
      this.user_id = data.user_id
      this.third_pay = data.third_pay

      if (this.third_pay) {
        this.payThird()
      } else {
        this.pay()
      }


    })
  }
}
</script>

<style scoped lang="scss">
.pay-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  .button {
    width: 80%;
    margin-top: 10px;
  }
  .amount {
    width: 80%;
    //background: black;
    .line {
      height: 30px;
      display: flex;
      font-size: 24rpx;
      align-items: center;
      .text {
        width: 120rpx;
        text-align: right;
      }
      .num {
        padding-left: 15px;
        flex: 1;
        color: red;
        font-size: 36rpx;
      }
    }
  }
}
</style>
